import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>我是副标题</span></span></h1>

// 一、react事件
// 1、特点：react事件的绑定是驼峰写法，且{}里写1个函数而不是字符串
// 2、事件对象：react返回的事件对象是对原生事件对象的代理，要想查看事件对象的属性值必须之间输出事件对象
// 注意：原生阻止默认行为可以直接返回return false；而在react中就必须用e.preventDefault()方法
class ParentCom extends React.Component{
  constructor(props){
    super(props);
  };
  preventEvent=(e)=>{
    console.log("我是preventEvent函数",e);
    return e.preventDefault();
  };
  preventEvent1=(e,data)=>{
    console.log('我是preventEvent1函数',e,data);
    return e.preventDefault();
  }
  render(){
    return (
      <div>
        <form>
          <div className='child'>
            <h4>这h是在表单中</h4>
            <button onClick={this.preventEvent}>普通写法是无法传递参数的</button>
          </div>
        </form>
        <h3> 测试react事件绑定----我是parentCom动态组件</h3>
        <button onClick={(e)=>{this.preventEvent1(e,'hello')}}>通过箭头函数写法进行多个参数的传递</button>
        <button onClick={function (e) {this.preventEvent1(e,'this a message')}.bind(this)  }>通过普通函数写法进行传参</button>
      </div>
    )
  }
};


// 二、react条件渲染
// 2.1 直接条件运算符返回要渲染的jsx对象
// 2.2 通过条件运算得出jsx，再将jsx渲染到模版中去

function UserGreet(props) { 
  return (
    <div>欢迎您的登陆
      <button onClick={props.changeLogin}>改变登陆状态</button>
    </div>

  )
 };

 function UserLogin(props){
   return (
     <div>您好！请您先登陆！
       <button onClick={props.changeLogin}>改变登陆状态</button>
     </div>
   )
 };

 class ParentCom2 extends React.Component{
   constructor(props){
     super(props);
     this.state = {
       isLogin:true
     };
   };
   changeLogin=()=>{
    this.setState({
      isLogin:this.state.isLogin==true?false:true
    })
   };
  //  render(){//第一种写法
  //     if(this.state.isLogin){
  //       return <UserGreet changeLogin={this.changeLogin}/>
  //     }else{
  //       return <UserLogin changeLogin={this.changeLogin}/>
  //     }
     
  //  };
   render(){//第二种写法
    let element = null;
    if(this.state.isLogin){
      element = <UserGreet changeLogin={this.changeLogin}/>
    }else{
      element = <UserLogin changeLogin={this.changeLogin}/>
    };
    return (
      <div>
        <h1>这是头部</h1>
        {element}
        <div>
          ---------------------------------
          {this.state.isLogin?<UserGreet changeLogin={this.changeLogin}/>:<UserLogin changeLogin={this.changeLogin}/>}
        </div>
        <footer>这是尾部</footer>
      </div>
    )
   }

 }
// 三、列表渲染


ReactDOM.render(
  <ParentCom2/>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
